<script setup>
import { dutyStuGetRotaServe } from '@/api/duty'
import { personGetTimeOnlyServe } from '@/api/person'
import { useFormatStore, useUserStore } from '@/stores'
import { transformSchedule } from '@/utils/dutyListChange'
import StuTimeSetDrawer from './components/StuTimeSetDrawer.vue'
import { ref } from 'vue'
import { Setting } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'

const {
  user: { stu_id, name }
} = useUserStore()
//获取格式
const formatStore = useFormatStore()
const { format, allWeek, columnLabels } = storeToRefs(formatStore)
//参数
const week = ref(1)
const thisWeek = ref(-1)
const showWeek = ref(1)
//获取值班表
const dutyList = ref([])
const getDutyListLoading = ref(false)
const getDutyList = async () => {
  getDutyListLoading.value = true
  dutyList.value = []
  let obj = {}
  if (thisWeek.value !== -1) {
    obj = { week: week.value }
  }
  const res = await dutyStuGetRotaServe(obj)
  week.value = res.week
  if (thisWeek.value == -1) thisWeek.value = res.week
  if (showWeek.value !== week.value) showWeek.value = res.week
  dutyList.value = transformSchedule(res.record)
  getDutyListLoading.value = false
  if (week.value == 0) ElMessage.warning({ message: '值班未安排', offset: 70 })
  else ElMessage.success({ message: '获取值班表成功', offset: 70 })
}
getDutyList()
//获取月值班时长
const grade = ref(0)
const getTime = async () => {
  const res = await personGetTimeOnlyServe(stu_id)
  grade.value = res.grade
}
getTime()

//上传空闲时段
const timeSetRef = ref()
const onOpenUploadTime = () => {
  timeSetRef.value.onOpenUploadTime()
}
</script>

<template>
  <div style="display: flex; justify-content: space-between; margin-bottom: 10px">
    <div>
      <strong>今日是第{{ thisWeek }}周</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <strong>查看第&nbsp;</strong>
      <el-select v-model="week" placeholder="Select" style="width: 70px">
        <el-option v-for="item in allWeek" :key="item" :label="item" :value="item" />
      </el-select>
      <strong>&nbsp;周</strong>
      &nbsp;&nbsp;&nbsp;
      <el-button type="primary" size="default" @click="getDutyList()"> 查询 </el-button>
    </div>
    <div style="margin-right: 50px">
      <strong>本月已值班{{ grade }}小时 </strong>
      <span style="margin-left: 50px">
        <el-button type="primary" size="default" @click="onOpenUploadTime" :icon="Setting">
          空闲时段管理
        </el-button>
      </span>
    </div>
  </div>
  <!-- 主 -->
  <div>
    <el-table :data="format" style="width: 100%" border v-loading="getDutyListLoading">
      <!-- 表左边 -->
      <el-table-column label="时间" prop="" width="120px" align="center">
        <template #default="{ row }">
          <div>{{ row.index }}</div>
          {{ row.start + '-' }}{{ row.end }}
        </template>
      </el-table-column>
      <!-- 主体 -->
      <el-table-column align="center">
        <template #header>
          <span style="color: #000; font-size: larger">{{ `第${showWeek}周排班表` }}</span>
        </template>
        <el-table-column
          v-for="(day, index) in dutyList"
          :key="index"
          :label="columnLabels[index]"
          align="center"
        >
          <template v-slot="scope">
            <span>
              <span v-for="(n, index) in day[scope.$index + 1]" :key="index">
                <el-button
                  class="elbname"
                  :style="{
                    marginRight: index % 2 == 0 ? '20px' : '',
                    color: name == n ? '#00BCFF' : ''
                  }"
                  style="font-size: larger"
                  text
                  bg
                  auto-insert-space
                >
                  {{ n }}
                </el-button>
                <br v-if="index % 2 != 0" />
              </span>
            </span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
  <!-- 空闲时段抽屉 -->
  <StuTimeSetDrawer ref="timeSetRef"></StuTimeSetDrawer>
</template>

<style lang="css" scoped>
.elbname {
  width: 65px;
  height: 25px;
}
</style>
